import { NodeSize } from '../config'

export default function valueMapper(flow) {
  flow.register('ValueMapper', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#16B24B',
              d: 'M636.342857 273.066667l48.761905 48.761904v-36.571428c0-46.32381-36.571429-85.333333-85.333333-85.333333H512v-48.761905h87.771429c73.142857 0 131.657143 58.514286 131.657142 131.657143v36.571428l48.761905-48.761905 31.695238 31.695239-104.838095 107.27619-102.4-102.4 31.695238-34.133333zM865.52381 680.228571c34.133333-12.190476 43.885714-34.133333 43.885714-63.390476v-43.885714c0-51.2-29.257143-78.019048-90.209524-78.019048h-146.285714V877.714286H828.952381c58.514286 0 95.085714-29.257143 95.085714-82.895238v-46.32381c-2.438095-41.447619-24.380952-63.390476-58.514285-68.266667zM721.67619 536.380952h95.085715c29.257143 0 43.885714 12.190476 43.885714 36.571429v43.885714c0 26.819048-14.628571 43.885714-51.2 43.885715h-87.771429V536.380952z m151.161905 253.561905c0 29.257143-17.066667 43.885714-51.2 43.885714h-99.961905v-131.657142h95.085715c39.009524 0 56.07619 17.066667 56.07619 46.323809v41.447619z'
            }
          ),
          h(
            'path',
            {
              fill: '#3E6480',
              d: 'M375.466667 529.066667h48.761904L297.447619 148.72381H231.619048L102.4 529.066667h48.761905l31.695238-92.647619h163.352381l29.257143 92.647619zM195.047619 394.971429l68.266667-212.114286 68.266666 212.114286H195.047619z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          '值映射'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
